<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | Health Platform</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/css/test.css">
    <link rel="stylesheet" href="/css/auth.css?v=1.0">
</head>
<body>
    <div class="container">
        <div class="logo">
            <h2>Health Platform</h2>
        </div>
        <div class="card">
            <div class="card-header">
                <h1>Welcome Back!</h1>
                <p>Enter your credentials to access your account</p>
            </div>
            
            <div class="card-body">
                <div id="alertBox" class="alert alert-danger">
                    <p id="alertMessage"></p>
                </div>
                
                <form id="loginForm">
                    <div class="form-group">
                        <i class="fas fa-user form-icon"></i>
                        <input type="text" class="form-control" id="username" name="username" placeholder="Username" required>
                    </div>
                    
                    <div class="form-group">
                        <i class="fas fa-lock form-icon"></i>
                        <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                    </div>
                    
                    <div class="remember-me">
                        <input type="checkbox" id="rememberMe" name="rememberMe">
                        <label for="rememberMe">Remember me</label>
                    </div>
                    
                    <button type="submit" class="button" id="loginButton">
                        Login
                        <i class="fas fa-spinner fa-spin loading-icon" id="loadingIcon"></i>
                    </button>
                </form>
            </div>
            
            <div class="card-footer">
                <p>Don't have an account? <a href="/auth/register">Register</a></p>
            </div>
        </div>
    </div>
    
    <script src="/js/auth.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const loginForm = document.getElementById('loginForm');
            const loginButton = document.getElementById('loginButton');
            const loadingIcon = document.getElementById('loadingIcon');
            const alertBox = document.getElementById('alertBox');
            const alertMessage = document.getElementById('alertMessage');
            const rememberMe = document.getElementById('rememberMe');
            
            // Check if there's a remembered user
            const rememberedUser = sessionStorage.getItem('rememberedUser');
            if (rememberedUser) {
                try {
                    const userObj = JSON.parse(rememberedUser);
                    document.getElementById('username').value = userObj.username || '';
                    rememberMe.checked = true;
                } catch (e) {
                    console.error('Error parsing remembered user:', e);
                }
            }
            
            // Handle form submission
            loginForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                // Show loading state
                loginButton.disabled = true;
                loadingIcon.style.display = 'inline-block';
                alertBox.style.display = 'none';
                
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                
                try {
                    const response = await fetch('/auth/login', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ username, password }),
                    });
                    
                    const data = await response.json();
                    
                    if (!response.ok) {
                        throw new Error(data.message || 'Invalid username or password');
                    }
                    
                    // Store user data in sessionStorage
                    sessionStorage.setItem('user', JSON.stringify(data.user));
                    
                    // Handle remember me
                    if (rememberMe.checked) {
                        sessionStorage.setItem('rememberedUser', JSON.stringify({ username }));
                    } else {
                        sessionStorage.removeItem('rememberedUser');
                    }
                    
                    // Redirect to index page regardless of role
                    window.location.href = '/page/index';
                    
                } catch (error) {
                    // Show error message
                    alertMessage.textContent = error.message || 'An error occurred during login. Please try again.';
                    alertBox.style.display = 'block';
                    
                    // Reset loading state
                    loginButton.disabled = false;
                    loadingIcon.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html> 